//上课小例子
import React,{Component,useState,useEffect,createContext,useContext,useRef} from 'react';
// https://www.fastmock.site/mock/3c02a69b3952632e311022710cb48a6c/plant/getPlants
class Compare extends Component {
  // 状态简写
  state = {
      supportNum: 0,
      objectNum: 0,
      abandonNum: 0
  }
  curryClick = (type)=>{
      return ()=>{
          this.setState( {[type]: this.state[type]+1} )
      }
  }
  render() {
      const {supportNum, objectNum,abandonNum} = this.state;
      let per = (supportNum/(supportNum+objectNum)*100).toFixed(2);
      if(isNaN(per)){
          per = 0;
      }
      return (
          <div>
              <h2>{this.props.title}</h2>
              <div>支持人数：{supportNum}</div>
              <div>反对人数：{objectNum}</div>
              {/* <div>弃权人数：{abandonNum}</div> */}
              <div>支持率：{per}%</div>
              <div>
                  <button onClick={ this.curryClick('supportNum') }>支持</button>
                  <button onClick={ this.curryClick('objectNum') }>反对</button>
                  <button onClick={ this.curryClick('abandonNum') }>弃权</button>
              </div>
          </div>
      )
  }
}
const App6 = (props)=>{
  return (
    <>
      <Compare title='移动web比微信难'/>
      <Compare title='移动web比node难'/>
      <Compare title='微信比node难'/>
    </>
  )
}

export default App6;
